/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/9/19 8:11 下午
 * @version V1.0
 */
import React, { useState, useEffect, useRef } from 'react';
import { Input, Form, Button, Row, Col, Card, Select, TimePicker, message } from 'antd';
import UploadImg from 'components/UploadImg';
import moment from 'moment';
import { history } from 'umi';
import {
    reqGetPcategory,
    reqCreateShop,
} from 'api/index';
import SelectAddress from '@/pages/shop-manage/shop/components/select-address';

const format = 'HH:mm';
const formItemLayout = {
    labelCol: { span: 5 }, // 左侧label宽度
    wrapperCol: { span: 16 }, // 右侧输入框等的宽度
};
const tailLayout = {
    wrapperCol: { offset: 5, span: 16 },
};
const { Item } = Form;
const { Option } = Select;
const { RangePicker } = TimePicker;
const CreateShop = () => {
    const [form] = Form.useForm();
    const [addressConfig, setAddressConfig] = useState({});
    const [pcategoryOption, setPcategoryOption] = useState([]);
    const [selectAddressShow, setSelectAddressShow] = useState(false);

    const imgRefShopSign = useRef();
    const imgRefBusiness = useRef();
    const imgRefCatering = useRef();
    const imgRefBrand = useRef();

    const getPcategoryOption = async () => {
        const result = await reqGetPcategory();
        if (result.status === 1) {
            const pcategoryOption = result.data;
            setPcategoryOption(pcategoryOption);
        } else {
            message.error(result.message);
        }
    };

    useEffect(() => {
        getPcategoryOption();
    }, []);

    const submit = () => {
        const shop_sign = imgRefShopSign.current.cbImgRef();
        const business_license_image = imgRefBusiness.current.cbImgRef();
        const catering_service_license_image = imgRefCatering.current.cbImgRef();
        const brand_sale_protocol_image = imgRefBrand.current.cbImgRef();

        if (shop_sign.length === 0) {
            message.warn('请上传店铺招牌');
            return;
        }
        if (business_license_image.length === 0) {
            message.warn('请上传经营许可证');
            return;
        }
        if (catering_service_license_image.length === 0) {
            message.warn('请上传食品服务许可证');
            return;
        }
        if (brand_sale_protocol_image.length === 0) {
            message.warn('请上传品牌销售协议');
            return;
        }

        form.validateFields().then(async values => {
            values.category_id = values.category.key;
            values.category_name = values.category.label;
            values.shop_sign = shop_sign[0].url;
            values.business_license_image = business_license_image[0].url;
            values.catering_service_license_image = catering_service_license_image[0].url;
            values.brand_sale_protocol_image = brand_sale_protocol_image[0].url;
            values.start_time = moment(values.opening_hours[0]).format('HH:mm:ss');
            values.end_time = moment(values.opening_hours[1]).format('HH:mm:ss');

            values.address = addressConfig.address;
            values.latitude = addressConfig.latitude;
            values.longitude = addressConfig.longitude;
            delete values.opening_hours;
            delete values.addressOption;
            delete values.category;
            const result = await reqCreateShop(values);
            if (result.status === 1) {
                history.push('/shop-manage/shop/list');
            } else {
                message.error(result.message);
            }
        }).catch(info => {
        });
    };
    return (
        <Card>
            <Form
                form={form}
                {...formItemLayout}
            >
                <Row>
                    <Col span={8}>
                        <Item
                            label="店铺名称"
                            name="name"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺负责人"
                            name="leader"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺负责人"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="联系方式"
                            name="phone"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入联系方式"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺地址"
                            name="addressOption"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input readOnly onClick={() => setSelectAddressShow(true)} placeholder="请选择店铺地址"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺分类"
                            name="category"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Select
                                placeholder="请选择店铺分类"
                                labelInValue
                            >
                                {
                                    pcategoryOption.map(item => {
                                        return <Option key={item._id} value={item._id}>{item.name}</Option>;
                                    })
                                }

                            </Select>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="营业时间"
                            name="opening_hours"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <RangePicker
                                format={format}
                                style={{ width: '100%' }}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="店铺描述"
                            name="description"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="品牌名称"
                            name="brand_name"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="促销信息"
                            name="promotion_info"
                            rules={[{ required: true, message: '必填' }]}
                        >
                            <Input placeholder="请输入店铺名"/>
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item
                            label="店铺招牌"
                        >
                            <UploadImg
                                fileListDetail={[]}
                                imgRef={imgRefShopSign}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="经营许可证"
                        >
                            <UploadImg
                                fileListDetail={[]}
                                imgRef={imgRefBusiness}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="食品服务许可证"
                        >
                            <UploadImg
                                fileListDetail={[]}
                                imgRef={imgRefCatering}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                    <Col span={8}>
                        <Item
                            label="品牌销售协议"
                        >
                            <UploadImg
                                fileListDetail={[]}
                                imgRef={imgRefBrand}
                                max={1}
                                isCropper={true}
                            />
                        </Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <Item {...tailLayout}>
                            <Button type="primary" onClick={submit}>提交</Button>
                        </Item>
                    </Col>
                </Row>
            </Form>
            <SelectAddress
                addressConfig={addressConfig}
                selectAddressShow={selectAddressShow}
                cb={(res) => {
                    setAddressConfig(res.signAddrList);
                    form.setFieldsValue({
                        addressOption: res.signAddrList.address,
                    });
                    setSelectAddressShow(res.show);
                }}
            />
        </Card>

    );
};

export default CreateShop;
